<!--
 * @Author: 孙旺 741967556@qq.com
 * @Date: 2025-05-09 15:49:38
 * @LastEditors: 孙旺 741967556@qq.com
 * @LastEditTime: 2025-05-12 14:14:03
 * @FilePath: \兴元\尝试\qiankun\qkMain\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="app">
    <!-- 登录页面 -->
    <div v-if="!isLoggedIn" class="login-container">
      <el-card class="login-card">
        <template #header>
          <div class="card-header">
            <h2>系统登录</h2>
          </div>
        </template>
        <el-form :model="loginForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 已登录后的内容 -->
    <template v-else>
      <!-- 导航栏 -->
      <div class="nav-container">
        <div class="user-info">
          <span>欢迎，{{ loginForm.username }}</span>
          <el-button type="text" @click="handleLogout">退出登录</el-button>
        </div>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="主应用" name="main"></el-tab-pane>
          <el-tab-pane label="子应用1" name="firstApp"></el-tab-pane>
          <el-tab-pane label="子应用2" name="secondApp"></el-tab-pane>
        </el-tabs>
      </div>
      
      <!-- 主应用内容区域 -->
      <div v-show="activeTab === 'main'" class="main-content">
        <h1>这是主应用内容</h1>
        <p>当前登录token: {{ token }}</p>
      </div>
      
      <!-- 子应用容器 -->
      <div id="subapp-container" v-show="activeTab !== 'main'"></div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { initGlobalState } from 'qiankun'

// 登录状态
const isLoggedIn = ref(false)
const token = ref('')
const loginForm = ref({
  username: '',
  password: ''
})

// 当前激活的tab
const activeTab = ref('main')

// 初始化全局状态
const actions = initGlobalState({
  token: '',
  methodCall: {
    name: '',
    args: [],
    timestamp: 0
  }
})

// 处理登录
const handleLogin = () => {
  // 这里应该是实际的登录逻辑，例如调用API验证用户名和密码
  // 简化处理：只要输入了用户名和密码就视为登录成功
  if (loginForm.value.username && loginForm.value.password) {
    // 生成模拟token
    token.value = `user_${loginForm.value.username}_${Date.now()}`
    
    // 更新全局状态
    actions.setGlobalState({ token: token.value })
    
    // 存储到localStorage，便于持久化
    localStorage.setItem('token', token.value)
    localStorage.setItem('username', loginForm.value.username)
    
    // 更新登录状态
    isLoggedIn.value = true
  } else {
    alert('请输入用户名和密码')
  }
}

// 处理退出登录
const handleLogout = () => {
  // 清除token
  token.value = ''
  actions.setGlobalState({ token: '' })
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  
  // 更新登录状态
  isLoggedIn.value = false
  
  // 返回主页
  activeTab.value = 'main'
  history.pushState({}, '', '/')
}

// 处理tab切换
const handleTabClick = (tab) => {
  if (tab.props.name === 'main') {
    // 切换到主应用
    history.pushState({}, '', '/')
  } else {
    // 切换到子应用
    history.pushState({}, '', `/${tab.props.name}`)
  }
}

// 检查是否已登录
onMounted(() => {
  // 从localStorage获取登录信息
  const savedToken = localStorage.getItem('token')
  const savedUsername = localStorage.getItem('username')
  
  if (savedToken && savedUsername) {
    token.value = savedToken
    loginForm.value.username = savedUsername
    isLoggedIn.value = true
    
    // 更新全局状态
    actions.setGlobalState({ token: savedToken })
  }
  
  // 根据当前路由设置初始激活的tab
  const path = window.location.pathname
  if (path.includes('firstApp')) {
    activeTab.value = 'firstApp'
  } else if (path.includes('secondApp')) {
    activeTab.value = 'secondApp'
  } else {
    activeTab.value = 'main'
  }
})
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.login-card {
  width: 400px;
}

.card-header {
  display: flex;
  justify-content: center;
}

.nav-container {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.user-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.main-content {
  padding: 20px;
  text-align: center;
}

#subapp-container {
  margin-top: 20px;
}
</style>
